<template>
  <div class="pages">
    <div class="header_view">
      <div class="header_view_1"></div>
      <div class="header_view_2">患者信息</div>
    </div>

    <div class="item_1">
      <div class="item_1_1">
        就 诊 人 ：
        <span class="item_1_2"
        >{{ patientInfo.patientName }}&#x3000;&#x3000;{{
            patientInfo.patientSex == 'M' ? "男" : "女"
          }}&#x3000;&#x3000;{{ patientInfo.patientAge }}</span
        >
      </div>
    </div>
    <div class="item_1" v-if="patientInfo.patientHyzk">
      <div class="item_1_1">
        婚育情况：
        <span class="item_1_2">{{
            patientInfo.patientHyzk
          }}</span>
      </div>
    </div>
    <div class="item_1" v-if="patientId">
      <div class="item_1_1">
        就诊卡号： <span class="item_1_2">{{ patientId }}</span>
      </div>
    </div>
    <div class="item_1" v-if="patientInfo.patientBirthday">
      <div class="item_1_1">
        出生日期： <span class="item_1_2">{{ getPartTime(patientInfo.patientBirthday) }}</span>
      </div>
    </div>

    <div class="header_view" style="margin-top: 0.75rem" >
      <div class="header_view_1"></div>
      <div class="header_view_2">就诊信息</div>
    </div>
    <div class="item_1">
      <div class="item_1_1">
        就诊时间： <span class="item_1_2">{{ patientInfo.seeDate }}</span>
      </div>
    </div>
    <div class="item_1">
      <div class="item_1_1">
        就诊科室： <span class="item_1_2">{{ patientInfo.seeDept }}</span>
      </div>
    </div>
    <div class="item_1">
      <div class="item_1_1">
        诊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;断： <span class="item_1_2">{{ diagName }}</span>
      </div>
    </div>

    <div class="item_1" v-if="patientInfo.patientZs">
      <div class="item_1_1">
        主&#x3000;&#x3000;诉：
        <span class="item_1_2">{{ patientInfo.patientZs }}</span>
      </div>
    </div>
    <div class="item_1" v-if="patientInfo.patientXbs">
      <div class="item_1_1">
        现 病 史 ： <span class="item_1_2">{{ patientInfo.patientXbs }}</span>
      </div>
    </div>
    <div class="item_1" v-if="patientInfo.patientJws">
      <div class="item_1_1">
        既 往 史 ： <span class="item_1_2">{{ patientInfo.patientJws }}</span>
      </div>
    </div>
    <div class="item_1" v-if="patientInfo.patientGms">
      <div class="item_1_1">
        过 敏 史 ： <span class="item_1_2">{{ patientInfo.patientGms }}</span>
      </div>
    </div>

    <div class="item_1" v-if="patientInfo.patientRcxg">
      <div class="item_1_1">
        日常习惯：<span class="item_1_2">{{ patientInfo.patientRcxg }}</span>
      </div>
    </div>
    <div class="main_info1" v-if="reportList.length>0">
      <div>
        <span>检&#x3000;&#x3000;查：</span
        >
        <!--        头部CT平扫：颅脑CT平扫脑实质未见明显异常；胸透CT：右下方有肿块阴影-->
      </div>
      <!--      <img src="@/assets/img/right.png" alt="" />-->
    </div>
    <div class="main_info1"  v-if="reportList.length>0">
      <div>
        <span>检&#x3000;&#x3000;验：</span>
        <!--        血三项抽血检验：血小板浓度偏低-->
      </div>
      <!--      <img src="@/assets/img/right.png" alt="" />-->
    </div>
    <div class="item_1" v-if="patientInfo.patientZlyj">
      <div class="item_1_1">
        治疗意见： <span class="item_1_2">{{ patientInfo.patientZlyj }}</span>
      </div>
    </div>
    <template v-if="items.length>0">
      <div class="header_view" style="margin-top: 0.75rem">
      <div class="header_view_1"></div>
      <div class="header_view_2">项目信息</div>
    </div>
    <div class="table_box">
      <table>
        <thead>

          <th>项目名称</th>
          <th>规格</th>
          <th>单位</th>
          <th>单价</th>
          <th>总价</th>
      
        </thead>
        <tbody>
        <template v-for="(item, index) in items"  v-if="items.length > 0">
            <tr>
              <td>{{ item.detailName }}</td>
              <td>{{ item.detailCount }}</td>
              <td>{{ item.detailUnit }}</td>
              <td>{{ item.detailPrice/100 }}</td>
              <td>{{ item.detailAmout/100 }}</td>
            </tr>
          </template>
          <template v-else>
            <tr>
              <td colspan="5" style="text-align: center">无数据</td>
            </tr>
          </template>
        </tbody>
      </table>
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
    </template>
    
  </div>
</template>
<script>
import {getOutpatientOutMainInfoList} from "@/api/api";

export default {
  components: {},
  data() {
    return {
      patientId:this.$route.query.cardNo,
      diagName:this.$route.query.diagName,
      userInfo: {},
      info: {},
      patientInfo: [],
      items: [],
      reportList: []
    };
  },
  created() {
    this.getOutpatientOutMainInfoList();

  },
  methods: {
    getPartTime(val) {

      // var timestr = ""+ Number(timearr[1])+ "月" + timearr[2]+"日";
      // console.log(4444,val)
      try {
        if (val) {
          return val.substring(0, 10);

        }
      } catch (err) {
        alert(err)
        return val;
      }
    },
    formatRegTime(date, fmt) {
      var date = new Date(date);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      var o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          var str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
        }
      }
      return fmt;
    },
    getOutpatientOutMainInfoList() {
      var data = {
        clinicCode: this.$route.query.clinicCode,
        visitDate: this.formatRegTime(this.$route.query.visitDate,"yyyy-MM-dd"),
        patientIdcardNo: this.$route.query.patientIdcardNo,
        patientName: this.$route.query.patientName
      };
      getOutpatientOutMainInfoList(data).then((res) => {
        if (res.code == 200) {
          this.patientInfo = res.data.patientInfo;
          this.items = res.data.items;
          this.reportList = res.data.reportList;
        }
      });
    },

  },
};
</script>
<style scoped>
.header_view {
  padding-left: 1rem;
  display: flex;
  align-items: center;
  background: white;
  width: calc(100% - 1rem);
  height: 3.13rem;
}

.header_view_1 {
  width: 0.19rem;
  height: 0.94rem;
  background: #448eff;
  border-radius: 0.13rem;
}

.header_view_2 {
  padding-left: 0.63rem;
  font-size: 1.06rem;
  font-weight: bold;
}

.item_1 {
  width: calc(100% - 2rem);
  padding: 0 1rem;
  height: 2.5rem;
  background: white;
  display: flex;
  align-items: center;
}

.item_1_1 {
  font-size: 0.94rem;
  font-weight: 500;
  color: #949fb4;
  display: flex;
  width: 100%;
}

.item_1_2 {
  width: calc(100% - 5rem);
  /* padding-right: 1rem; */
  font-size: 0.94rem;
  font-weight: 500;
  color: #3f4551;
  word-break: normal;
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
}

.item_1_2_1 {
  padding-right: 1rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: #3f4551;
  padding-left: 1rem;
}

.next_box {
  width: calc(100% - 2rem);
  height: 2.75rem;
  padding: 0 1rem;
  position: fixed;
  bottom: 0.63rem;
}

.next_box > div {
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  border-radius: 0.19rem;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 2.75rem;
  color: #fff;
}

.space {
  height: 5rem;
}

.table_box {
  width: calc(100% - 2rem);
  padding: 1rem;
  background-color: #fff;

  font-size: 0.8125rem;
}

.sign {
  display: flex;
  align-items: center;
  height: 3.125rem;
  color: #949fb4;
  font-size: 0.875rem;
}

.sign img {
  width: 4.375rem;
  height: 2.5rem;
  object-fit: contain;
}

.table_box table {
  width: 100%;
  border-collapse: collapse;
}

.table_box td,
th {
  border: 1px solid #d6dff1;
  font-weight: normal;
  text-align: center;
  padding: 0.3125rem 0.375rem;
}

.table_box th {
  height: 2.1875rem;
}

.table_box thead {
  background-color: #79beff;
  color: #fff;
}

.main_info1 {
  display: flex;
  align-items: center;
  margin-bottom: 0.9375rem;
  width: calc(100% - 2rem);
  padding: 0 1rem;
}

.main_info1 > div {
  width: calc(100% - 1rem);
  font-size: 0.9375rem;
}

.main_info1 > div span {
  color: #949fb4;
}

.main_info1 > img {
  width: 0.5rem;
  height: 0.8125rem;
  margin-left: 0.5rem;
}
</style>
